<template>
  <!--
  v-if与v-show：
  共同点：都是用于控制元素显示与隐藏的指令
  区别：

  实现原理：
  v-if： 是一个条件渲染指令，用于根据表达式的值决定是否在DOM中插入元素。
  只有当表达式的值为true时，元素才会被渲染，否则元素将从DOM中移除。
  v-show：也是一个条件渲染指令，但与 v-if 不同，v-show 不会移除元素，
  而是通过设置 CSS 属性 display 的值来控制元素的显示与隐藏

  性能：
  v-if：在条件首次为 true 时会有更高的初始渲染成本，因为需要创建 DOM 元素。
  当条件频繁切换时，反复的 DOM 销毁和重建会带来较高的性能消耗。
  v-show：初始渲染成本较低，因为元素始终存在于 DOM 中，
  仅通过 CSS 属性控制显示和隐藏。在条件频繁切换时性能更好，因为不涉及 DOM 元素的创建和销毁。

  适用场景：
  v-if：适用于条件很少变化，或者初次渲染不需要的情况。例如，根据权限动态加载组件。
  v-show：适用于需要频繁切换显示和隐藏的情况，例如，标签页的切换
  -->
  <div v-if="testIf">v-if</div>
  <div v-show="testShow">v-show</div>
  <button @click="onClickIf">操作v-if</button>
  <button @click="onClickShow">操作v-show</button>
  <hr>
  <div class="ifshow" v-if="testIfElse">如果条件满足就展示</div>
  <div class="elseshow" v-else>如果条件不满足就展示</div>
  <button @click="onClickIfElse">操作v-if v-else</button>
</template>
<script setup>
  import { ref } from 'vue';
  let testIf = ref(true)
  let testShow = ref(true)
  let testIfElse = ref(true)
  function onClickIf() {
    testIf.value = !testIf.value
  }
  function onClickShow() {
    testShow.value = !testShow.value
  }
  function onClickIfElse(){
    testIfElse.value = !testIfElse.value
  }
</script>

<style scoped>
  button {
    margin-top: 20px;
  }
  hr {
    margin-top: 20px;
  }
</style>